<template>
	<el-dialog :title="!dataForm.id ?'新增':'修改'" :visible.sync="dialogVisible" :before-close="handleClose" width="640px">
		<el-form :model="dataForm" size="small" :rules="rules" ref="dataForm" label-width="150px" class="demo-ruleForm">
			<el-form-item label="登录账号" prop="username">
				<el-input v-model="dataForm.username" placeholder="账号由字母或数字组成" clearable></el-input>
			</el-form-item>
			<el-form-item label="登录密码" prop="password">
				<el-input type="password" v-model="dataForm.password" placeholder="请输入登录密码" clearable></el-input>
			</el-form-item>
			<el-form-item label="确认密码" prop="r_password">
				<el-input type="password" v-model="dataForm.r_password" placeholder="请再次输入密码" clearable></el-input>
			</el-form-item>
			<el-form-item label="所属角色" prop="groupId">
				<el-select v-model="dataForm.groupId" placeholder="请选择" clearable style="width: 100%;">
					<el-option v-for="item in authList" :key="item.id" :label="item.title" :value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="管理员姓名" prop="name">
				<el-input v-model="dataForm.name" placeholder="请输入管理员姓名" clearable></el-input>
			</el-form-item>
			<el-form-item label="手机号" prop="mobile">
				<el-input v-model="dataForm.mobile" placeholder="请输入手机号" clearable></el-input>
			</el-form-item>
			<el-form-item label="状态" prop="status">
				<el-radio v-model="dataForm.status" label="1">正常</el-radio>
				<el-radio v-model="dataForm.status" label="0">禁用</el-radio>
			</el-form-item>
		</el-form>
		<span slot="footer" class="dialog-footer">
			<el-button @click="handleClose" size="small">取 消</el-button>
			<el-button type="primary" size="small" @click="submitForm">确 定</el-button>
		</span>
	</el-dialog>
</template>

<script>
	import debounce from 'lodash/debounce'
	export default {
		data() {
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else {
					if (this.dataForm.r_password !== '') {
						this.$refs.dataForm.validateField('r_password');
					}
					callback();
				}
			};
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.dataForm.password) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			return {
				dialogVisible: false,
				dataForm: {
					id: '',
					username: '',
					password: '',
					r_password: '',
					name: '',
					groupId: '',
					status: '1',
					is_post: 1,
					mobile:''
				},
				rules: {
					username: [{
						required: true,
						message: '请输入登录账号',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						validator: validatePass,
						trigger: 'blur'
					}],
					r_password: [{
						required: true,
						validator: validatePass2,
						trigger: 'blur'
					}],
					groupId: [{
						required: true,
						message: '请选择所属角色',
						trigger: 'change'
					}],
					name: [{
						required: true,
						message: '请输入管理员姓名',
						trigger: 'blur'
					}],
					mobile: [{
						required: true,
						message: '请输入管理员姓名',
						trigger: 'blur'
					}]
				},
				authList: []
			}
		},
		created() {
			this.$http.post('/api/authgroup/getgroupList', {
				page: 1,
				limit: 100
			}).then(res => {
				this.authList = res.result.data
			})
		},
		methods: {
			init() {
				this.dialogVisible = true
				this.$nextTick(() => {
					this.$refs.dataForm.resetFields()
					if (this.dataForm.id) {
						this.getInfo()
					}
				})
			},
			getInfo() {
				this.$nextTick(() => {
					this.$loading()
				})
				this.$http.post(`/api/admin/edit`, {
					id: this.dataForm.id
				}).then(res => {
						this.$closeLoading()
					this.dataForm = {
						...this.dataForm,
						...res.result.detail
					}
					this.dataForm.status = String(this.dataForm.status)
					this.dataForm.r_password = this.dataForm.password
				})
			},
			submitForm() {
				this.$refs['dataForm'].validate((valid) => {
					if (valid) {
						this.$loading()
						this.$http.post(!this.dataForm.id ? '/api/admin/add' : '/api/admin/edit', this
							.dataForm).then(res => {
							this.$closeLoading()
							this.$message({
								message: res.msg,
								type: 'success',
								duration: 1500,
								onClose: () => {
									this.dialogVisible = false
									this.resetForm()
									this.$emit('refreshDataList')
								}
							});
						})
					} else {
						return false;
					}
				});
			},
			resetForm() {
				this.$refs.dataForm.resetFields();
			},
			handleClose() {
				this.resetForm()
				this.dialogVisible = false
			}
		}
	}
</script>
<style scoped lang="scss">
	.demo-ruleForm {
		padding-right: 50px;
	}
</style>